<template>
 <a-modal v-model:visible="visible" :footer="false"  @cancel="handleCancel">
    <template #title>
     {{ title }}
    </template>
    <h4 style="margin-top:0;">复制分享链接</h4>
    <a-typography-paragraph copyable>
      {{ link }}
    </a-typography-paragraph>
    <h4 style="margin-bottom: 16px;">手机扫码查看</h4>
    <img :src="codeImg" >
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// @ts-ignore
import QRCode from 'qrcode'
import message from '@arco-design/web-vue/es/message';
  interface Props {
    link: string,
    title: string,

  }

  const props = withDefaults(defineProps<Props>(), {
    link: () => 'https://www.baidu.com/',
    title: () => '分享',
  }) 

  const codeImg = ref('')
  QRCode.toDataURL(props.link)
  .then((url:any) => {
    console.log(url)
    codeImg.value = url
  })
  .catch((err:any) => {
    message.error(err)
  })

  // 弹窗相关
  const visible = ref(false)

  const openModel = () => {
    visible.value = true
  }
  const handleCancel = () => {
    visible.value = false
  }

  defineExpose({openModel})
</script>


<style lang="scss" scoped>

</style>